Next.jsのチュートリアルでブログアプリを作ってみた

渋谷翔悟

2023.08.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Next.jsのチュートリアルをやったので、内容や感想などを書きます。チュートリアルは英語ですが、翻訳機能を使えば簡単でした。

チュートリアルでは、簡易的なブログアプリの作成を行います。最終的に完成するwebアプリがデモとして、このページで公開されています

チュートリアルはいくつかの章に分けてあり、各章のタイトルは以下のようになっています。

- Next.jsアプリの作成
- ページ遷移
- Assets, Metadata, CSS
- 事前レンダリングとデータ取得
- 動的ルーティング
- APIルーティング
- デプロイ

Reactの基本的な知識があることが前提となっており、React未経験の場合は、Reactのチュートリアルを先に行うことが推奨されています。各章の最初には、前章までを完走したコードがVercelのリポジトリに載せてあります。全てのチュートリアルを通して行うのでなく自分の気になった箇所のみを学ぶこともできます。

Next.jsアプリの作成

チュートリアル用のリポジトリが用意されており、それを元にcreate-next-appを使ってアプリケーションの雛形を作成します。開発サーバーを起動して動作確認し、ページの一部の文字を変更して反映されているか確認します。

ページ遷移

Next.jsでは、ディレクトリ名やファイル名にしたがって、各ページのpathが決まっています。pages/内にコンポーネントを作成して、その仕様を学びます。

pages/index.js → http://localhost:3000/
pages/posts/first-post.js → http://localhost:3000/posts/first-post

また<Link>を使ったページ遷移を行い、<a>を使ったページ遷移との違いのほか、コードの分割とプリフェッチの仕様についても説明文を読んで学びます。

Assets, Metadata, CSS

この章では以下のことを学びます。

静的アセットの追加方法

用意された画像を/publicフォルダに配置し、<Image>を使って画像を最適化した上で表示します。

メタデータの追加

<Head>を使ってtitleタグを追加し、タブのタイトルが変更されているか確認します。

scriptの読み込み

例としてFaceBook SDKのスクリプトを追加します。<Script>を使うことで、読み込み動作を調整してスクリプトの追加を最適化することができます。

CSSの追加

css modulesを使うことでクラス名が衝突することを防ぎながら、スタイルを追加します。コンポーネント単位のスタイルや、グローバルのスタイルの当て方をそれぞれ実践します。そのほか、clsxを使ったスタイルの切り替えや、PostCssを使ったCSSのコンパイル、Sassの導入方法など触りの部分のみですが説明が書かれています。

事前レンダリングとデータ取得

この章では、外部にあるデータをアプリから取得(フェッチ)することを通して、事前レンダリングについて学びます。まず図解された説明を読み、プリレンダリング、静的生成、サーバーサイドレンダリングなどの用語を理解します。
次に、ブログの内容をアプリからフェッチしてレンダリングする方法を実践します。 posts/以下に配置したマークダウン形式のファイル(.md)を読み込み、getStaticPropsを使って静的生成を行います。もしサーバーサイドレンダリングを行いたい場合はgetServerSidePropsを使います。

動的ルート

パスによって指定されたデータを取得する処理を実装して、動的ルートについて学びます。

http://localhost:3000/posts/ssg-ssrにアクセス

→posts/ssg-ssr.mdをフェッチして投稿ページをレンダリング

http://localhost:3000/posts/pre-renderingにアクセス

→posts/pre-rendering.mdをフェッチして投稿ページをレンダリング

Next.jsでは、[id].jsのようにファイル名が[]で挟まれている場合、動的ルートが行われます。チュートリアルでは以下の操作を行い動的ルートを実装します。

pages/[id].jsを作成
getStaticPaths関数からidとして利用可能な文字列の配列を返す
getStaticPropsでパスに含まれるidを受け取り、フェッチとレンダリングを行う

この章まででブログアプリは完成です。デプロイはしていませんが、デモで公開されているブログアプリと同じものが作成できました。

APIルート

既に前章まででブログアプリは完成していますが、最後にAPIルートについても紹介されています。前章まではフロント側のコードでしたが、この章ではバックエンド側で動作するコードを書きます。 APIルートを使用すると、Next.jsアプリ内にAPIエンドポイントを作成できます。 pages/api/hello.jsを作成して、handler関数を作成します。その後http://localhost:3000/api/helloにアクセスすると、json形式のレスポンスを受け取ることができます。